<template>
	<s-layout title="任务列表" class="set-userinfo-wrap">
	<view class="">
		<view v-for="item in state.list" style="width:700rpx;margin:auto;margin-top:20rpx;border-radius:30rpx">
			<view style="width: 100%;height:300rpx;">
				<image style="width:100%;height:100%;border-top-left-radius:30rpx;border-top-right-radius:30rpx"
				 :src="apiUrl + item.img" mode="aspectFit"></image>
			</view>
			<view style="padding: 10px;width:660rpx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;padding-bottom:5rpx;">
				<u-text style="font-size: 30rpx;font-family: PingFang SC;font-weight: 500;color: #333;width:100%;">
					{{item.task_title}}</u-text>
			</view>

			<view style="display: flex;justify-content: space-around;">
				<view style="">
					<view>
						<u-text class="tit_1">{{ item.task_price_platform }}</u-text>
					</view>
					<view>
						<u-text class="tit_2">佣金</u-text>
					</view>
				</view>
				<view style="">
					<view>
						<u-text class="tit_1">{{ item.task_num_single }}次</u-text>
					</view>
					<view>
						<u-text class="tit_2">每次可领取</u-text>
					</view>
				</view>
				<view style="">
					<view>
						<u-text class="tit_1">{{ item.task_endtime }}</u-text>
					</view>
					<view>
						<u-text class="tit_2">截止时间</u-text>
					</view>
				</view>

			</view>

			<view v-if="item.status == 200" class="btn" @click="receiveSubmit(item.id)">
				<u-text>领取任务</u-text>	
			</view>

			<view v-else class="btn" style="background:#484848c7">
				<u-text>任务进行中</u-text>	
			</view>

		</view>
	</view>
</s-layout>
</template>

<script setup>
import { reactive,ref  } from 'vue'
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';

const apiUrl = ref(import.meta.env.SHOPRO_BASE_URL)
const state  = reactive({
	list:{}
});



async function getTaskList(){
   const res = await sheep.$api.task.getTaskList();
   console.log(res.data)

   if(res.code == 1){
      state.list = res.data
   }
}


async function receiveSubmit(lid){
	console.log(lid)
	uni.showModal({
		title: '任务提醒',
		content: '确定要领取该任务吗？',
		cancelText: '再想想',
		confirmText: '确定',
		success: async function (res) {
			if (res.confirm) {
				const res = await sheep.$api.task.createReceive({lid:lid});
				if(res.code == 1){
					sheep.$helper.toast(res.msg);
					getTaskList();
				}
			}
		},
  });
}


onLoad(async () => {
  getTaskList();
})
</script>

<style scoped>
.tit_1{
	font-size: 26rpx;
	color:red;
}
.tit_2{
    font-size: 13px;
    color: #999;
    margin-top: 5px;
}
.btn{
	background: #ff2638;
    height: 41px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: center;
    line-height: 41px;
    color: #fff;
    font-size: 15px;
    margin-top: 15px;
}
</style>